<!-- templates/accounts/change_password.html -->
{% extends 'base.html' %}

{% block title %}修改密码 - AI故事生成器{% endblock %}

{% block content %}
<div class="change-password-container">
    <div class="change-password-header">
        <h1>修改密码</h1>
        <a href="{% url 'user:profile' %}" class="btn btn-secondary">返回个人中心</a>
    </div>
    
    <div class="change-password-content">
        <div id="password-message" class="message"></div>
        
        <form id="changePasswordForm" class="change-password-form">
            {% csrf_token %}
            
            <div class="form-group">
                <label for="old_password">当前密码</label>
                <input type="password" id="old_password" name="old_password" placeholder="请输入当前密码" required>
            </div>
            
            <div class="form-group">
                <label for="new_password">新密码</label>
                <input type="password" id="new_password" name="new_password" placeholder="请输入新密码" required>
            </div>
            
            <div class="form-group">
                <label for="confirm_password">确认新密码</label>
                <input type="password" id="confirm_password" name="confirm_password" placeholder="请再次输入新密码" required>
            </div>
            
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">修改密码</button>
                <a href="{% url 'user:profile' %}" class="btn btn-cancel">取消</a>
            </div>
        </form>
        
        <div class="password-tips">
            <h3>密码设置建议</h3>
            <ul>
                <li>建议使用至少6位字符</li>
                <li>可以包含字母、数字和特殊字符</li>
                <li>不要使用过于简单的密码</li>
                <li>定期更换密码以确保账户安全</li>
            </ul>
        </div>
    </div>
</div>

<style>
.change-password-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

.change-password-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 20px;
}

.change-password-header h1 {
    color: #333;
    margin: 0;
}

.btn {
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
    display: inline-block;
}

.btn-secondary {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background: #5a6268;
}

.btn-primary {
    background: #007bff;
    color: white;
}

.btn-primary:hover {
    background: #0056b3;
}

.btn-cancel {
    background: #f8f9fa;
    color: #6c757d;
    border: 1px solid #dee2e6;
}

.btn-cancel:hover {
    background: #e2e6ea;
}

.change-password-content {
    background: white;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.change-password-form .form-group {
    margin-bottom: 20px;
}

.change-password-form label {
    display: block;
    margin-bottom: 5px;
    color: #333;
    font-weight: 500;
}

.change-password-form input[type="password"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s;
}

.change-password-form input[type="password"]:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 30px;
}

.message {
    padding: 12px;
    margin-bottom: 20px;
    border-radius: 4px;
    display: none;
}

.message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.password-tips {
    margin-top: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 4px solid #007bff;
}

.password-tips h3 {
    color: #333;
    margin-bottom: 15px;
}

.password-tips ul {
    margin: 0;
    padding-left: 20px;
    color: #6c757d;
}

.password-tips li {
    margin-bottom: 8px;
}

@media (max-width: 768px) {
    .change-password-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .change-password-content {
        padding: 20px;
    }
}
</style>
{% endblock %}